<template>
  <div>
    <!-- 
      组件是个标签,标签就可以传递属性,如果传递的属性,在组件内部没有定义为prop.那么这些属性叫做
      非prop的属性, 非prop特性

      非prop的属性有特点
      1. 会继承到组件的根元素身上. 
      2. 这些继承的效果是替换的. class与style例外
      3. 这些属性可以在组件内部通过 $attrs 去获取到 class与style例外
      4. 有些时候,可能不希望它自动继承到根元素身上. 在组件内, 配置 inheritAttrs: false,
     -->
    <HelloVue class="box2" name="张三" age="18" sex="男" />

    <hr />
    <HelloWorld
      :name="person.name"
      :age="person.age"
      :address="person.address"
      :job="person.job"
    />

    <p>上面代码的简写</p>

    <HelloWorld v-bind="person" />

    <h1>App</h1>

    <BaseButton msgA="11111" />
    <BaseIcon />
    <BaseInput />
    <BaseCheckbox />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import HelloVue from "./components/HelloVue.vue";
// import BaseButton from './components/BaseButton.vue'
// import BaseIcon from './components/BaseIcon.vue'
// import BaseInput from './components/BaseInput.vue'

export default {
  name: "App",
  components: {
    HelloWorld: HelloWorld,
    HelloVue: HelloVue,
  },

  data() {
    return {
      person: {
        name: "张三",
        age: 18,
        address: "深圳市宝安区",
        job: "程序员",
      },
    };
  },
};
</script>
